import EditorTranspiler from '../components/EditorTranspiler'
import example from '../examples/jsx'


JSX is an extension to JavaScript that adds a new kind of <b>expression</b>. You can use JSX expressions anywhere you could use any other expression.

JSX is a shortcut for using the `React.createElement()` API, that is much more concise, easy to read, and visually looks a little like the generated UI (as both are tree-like). You don't <i>have to</i> use JSX, but there are practically no disadvantages, so you probably should use it.

JSX is tag-based like XML. Each tag, like `<View />`, is transformed into a call to `React.createElement()`. Any attributes become `props` of the instantiated component. Attributes can be strings like `foo='hello'`, or they can be interpolated JavaScript expressions when wrapped in curly braces as in `bar={baz}` (which would refer to the variable baz).

Tags can be self-closing, like `<View />`, or they can include both an opening and closing tag, like `<View></View>`. To include children elements, you will need to use an opening and closing tag and put the children tags within.

<EditorTranspiler {...example} />
